<template>
	<view>

		<uv-sticky :customNavHeight="0" bgColor="#fff" class="tn-shadow-md">
			<view class="tn-p-sm tn-pb-xs">
				<uv-subsection :list="orders" keyName="name" mode="subsection" :current="type" @change="change" />
			</view>
		</uv-sticky>

		<view class="tn-p-sm">
			<view class="ta-card" v-for="x in item.list" :key="x.id" @click="goto.order(x.order_no)">
				<view class="ta-card-head">
					<text>{{ x.order_no }}</text>
					<view>
						<!-- 0已取消,1预订单,2待支付,3待审核,4待发货,5已发货,6已收货,7已评论 -->
						<view v-if="x.status == 0" class="ta-main-text">已取消</view>
						<view v-if="x.status == 1" class="ta-main-text">预订单</view>
						<view v-if="x.status == 2" class="ta-main-text" @click="goto.payment(x.code)">待支付</view>
						<view v-if="x.status == 3" class="ta-main-text" @click="goto.payment(x.code)">待审核</view>
						<view v-if="x.status == 4" class="ta-main-text">待发货</view>
						<view v-if="x.status == 5" class="ta-main-text">待收货</view>
						<view v-if="x.status == 6" class="ta-main-text">待评论</view>
						<view v-if="x.status == 7" class="ta-main-text">已完成</view>
					</view>
				</view>

				<template v-for="xx in x.items" :key="xx.gcode + x.order_no">
					<view class="flex-x flex-align-center tn-m-sm">
						<uv-image :src="xx.gcover" height="100rpx" width="100rpx" radius="10rpx" :lazy-load="true" />
						<view class="flex flex-y tn-pl-sm">
							<view class="flex-x">
								<text>{{ xx.gname }}</text>
								<text class="ta-desc-text tn-text-sm tn-ml-xs">( {{ showSpec(xx.gspec) }} )</text>
							</view>
							<view class="flex-x tn-text-sm tn-mt-sm ta-desc-text">
								{{ Number(xx.stock_sales) }} {{ xx.gunit }} x {{ Number(xx.price_selling) }}
								元/{{ xx.gunit }}, 共计 {{ Number(xx.total_price_selling) }} 元
							</view>
						</view>
					</view>
				</template>

				<view class="ta-card-foot">
					<view class="flex-x-between">
						<view class="ta-desc-text flex-center">{{ x.create_time }}</view>
						<view class="flex-x flex-center">
							<text class="ta-desc-text">共计 </text>
							<uv-text mode="price" type="error" :bold="true" :text="Number(x.amount_real)" />
						</view>
					</view>
				</view>
			</view>

			<view class="tn-mt">
				<uv-load-more :status="item.more" @loadmore="loadData" />
			</view>

		</view>

	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { TaUseAccount, TaDataOrder } from '@/utils'

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			type: <any>0,
			item: <any>{},
			orders: <any>TaDataOrder.types()
		}
	},
	onShow() {
		uni.stopPullDownRefresh();
	},
	onLoad(options: any) {
		this.type = Number(options.type || 0);
		this.initData().loadData();
	},
	onReachBottom() {
		if (this.item.more === 'loadmore') {
			this.loadData()
		}
	},

	onPullDownRefresh() {
		this.initData().loadData()
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 数据切换
		change(v: any) {
			this.type = v;
			this.item = this.orders[v]
			this.loadData()
		},
		// 初始化数据
		initData() {
			this.item = this.orders[this.type]
			return this
		},
		// 加载订单数据
		loadData() {
			this.item.more = 'loading'
			TaDataOrder.get({ page: this.item.page + 1, status: this.item.stat }).then((ret: any) => {
				if (ret.data.list.length > 0) {
					this.item.nums = ret.data.page.total || 0
					this.item.page = ret.data.page.current || 0
					this.item.list = this.item.list.concat(ret.data.list)
					this.item.more = 'loadmore'
				}
				if (ret.data.page.total <= this.item.list.length) {
					this.item.more = 'nomore'
				} else if (this.item.list.length <= 0) {
					this.item.more = 'empty'
				}
			})
		},
	}
})
</script>